<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.10/dist/antd.css">
    <script type="text/javascript" src="https://unpkg.com/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/ant-design-vue@1.4.10/dist/antd.js"></script>
    <script>

    </script>
</head>

<body>
    <div class="text-center">
        <h1>Index</h1>

        <h2>发送测试数据</h2>
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">&nbsp;</div>
                <div class="col-6" id="vue">
                    <a-form>
                        <a-form-item label="重量" :label-col="{ span: 5 }" :wrapper-col="{ span: 20 }">
                            <a-input v-model="weight" placeholder="重量" />
                        </a-form-item>
                        <a-form-item label="16进制显示" :label-col="{ span: 5 }" :wrapper-col="{ span: 20 }">
                            <a-input v-model="hexMessage" disabled />
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" @click="sendHexMessage">发送</a-button>
                            <a-button type="primary" @click="sendHexMessageIncrease">发送递加</a-button>
                            <a-button type="primary" @click="sendHexMessageReduce">发送递减</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <div class="row">
                <div class="col-12  text-center">
                    <h1 class="display-4">磅表信息日志</h1>
                    <div class="container">
                        <div id="weighingData">
                            <a-button type="danger" @click="clearText">清理显示</a-button>
                            <ol>
                                <li v-for="item in receivedMessages">{{item}}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        !function () {
            new Vue({
                el: '#weighingData',
                data() {
                    return {
                        connection: null,
                        receivedMessages: ["第一条消息"]
                    }
                },
                methods: {
                    prepareConnection() {
                        this.connection = new signalR.HubConnectionBuilder().withUrl("/socket/defaultHub").build();
                        this.connection.onclose(err => {
                            console.log("defaultHub连接已断");
                            this.connect();
                        });
                        this.connection.on("receiveMessage", this.receiveMessage);
                    },
                    async connect() {
                        await this.connection.start()
                            .catch(err => {
                                console.log("defaultHub没连上");
                                setTimeout(this.connect, 3000);
                            });
                        console.log("defaultHub已连接");
                    },
                    //接收数据
                    receiveMessage(data) {
                        this.receivedMessages.push(data);
                    },
                    delay() {
                        return new Promise(resolve => {
                            setTimeout(() => resolve(), 300);
                        });
                    },
                    clearText() {
                        var length = this.receivedMessages.length;
                        this.receivedMessages.splice(0, length - 3);
                    }
                },
                created() {
                    this.prepareConnection();
                    this.connect();
                }
            });
        }();

    </script>
    <script type="text/javascript">
        new Vue({
            el: "#vue",
            data: function () {
                return {
                    weight: 500.050
                    //hexMessage: "02 2B 35 30 30 30 35 30 33 31 27 BD E0"
                }
            },
            computed: {
                hexMessage: function () {
                    var txt = this.weight.toString();
                    //整数部分的位数，通过小点位置计算出
                    var dotPos = txt.indexOf(".");
                    var fractionalDigitsCount
                    if (dotPos < 0) {
                        fractionalDigitsCount = 6 - txt.length;
                    }
                    else {
                        fractionalDigitsCount = 6 - dotPos;
                    }
                    txt = txt.replace(".", "");
                    txt = txt.padEnd(6, "0").substring(0, 6);
                    var val = "";
                    for (var c of txt) {
                        val += `3${c} `
                    }
                    val += `3${fractionalDigitsCount}`
                    return `02 2B ${val} 31 27 BD E0`;
                }
            },
            created: function () {
            },
            methods: {
                sendHexMessage: function () {
                    fetch("api/RealTimeMessages/SendTestData", {
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8',
                        },
                        method: 'POST',
                        body: JSON.stringify(this.hexMessage)
                    }).then(m => console.log("已发送,%o", m), e => console.error("已异常,%o", e));
                },
                sendHexMessageIncrease: function () {
                    //注意从文本框获取的值是字符串型的
                    this.weight = parseFloat(this.weight);
                    this.weight += 10;
                    this.sendHexMessage();
                },
                sendHexMessageReduce: function () {
                    this.weight -= 10;
                    this.sendHexMessage();
                }
            }
        });
    </script>

</body>

</html>